<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>Live2d Pio</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <link rel="shortcut icon" href="./favicon.ico">
  <style>
    body {
      height: 100vh;
      cursor: url('../assets/cursor.cur'), auto !important;
    }

    .kawaii {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1;
      font-size: 0;
      transition: all .3s ease-in-out;
      -webkit-transform: translateY(3px);
      transform: translateY(3px);
    }

    .kawaii:hover {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    @media (max-width: 768px) {
      .kawaii {
        display: none;
      }
    }

    .kawaii-tips {
      opacity: 0;
      width: 500px;
      height: 140px;
      margin: -20px 20px;
      padding: 5px 10px;
      border: 1px solid rgba(224, 186, 140, 0.62);
      border-radius: 12px;
      background-color: rgba(236, 217, 188, 0.5);
      box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
      font-size: 12px;
      text-overflow: ellipsis;
      overflow: hidden;
      position: absolute;
      animation-delay: 5s;
      animation-duration: 50s;
      animation-iteration-count: infinite;
      animation-name: shake;
      animation-timing-function: ease-in-out;
    }

    .kawaii #live2d {
      position: relative;
    }

    @keyframes shake {
      2% {
        transform: translate(0.5px, -1.5px) rotate(-0.5deg);
      }

      4% {
        transform: translate(0.5px, 1.5px) rotate(1.5deg);
      }

      6% {
        transform: translate(1.5px, 1.5px) rotate(1.5deg);
      }

      8% {
        transform: translate(2.5px, 1.5px) rotate(0.5deg);
      }

      10% {
        transform: translate(0.5px, 2.5px) rotate(0.5deg);
      }

      12% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg);
      }

      14% {
        transform: translate(0.5px, 0.5px) rotate(0.5deg);
      }

      16% {
        transform: translate(-1.5px, -0.5px) rotate(1.5deg);
      }

      18% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg);
      }

      20% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg);
      }

      22% {
        transform: translate(0.5px, -1.5px) rotate(1.5deg);
      }

      24% {
        transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
      }

      26% {
        transform: translate(1.5px, 0.5px) rotate(1.5deg);
      }

      28% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
      }

      30% {
        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
      }

      32% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
      }

      34% {
        transform: translate(2.5px, 2.5px) rotate(-0.5deg);
      }

      36% {
        transform: translate(0.5px, -1.5px) rotate(0.5deg);
      }

      38% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
      }

      40% {
        transform: translate(-0.5px, 2.5px) rotate(0.5deg);
      }

      42% {
        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
      }

      44% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
      }

      46% {
        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
      }

      48% {
        transform: translate(2.5px, -0.5px) rotate(0.5deg);
      }

      50% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
      }

      52% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg);
      }

      54% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
      }

      56% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg);
      }

      58% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
      }

      60% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
      }

      62% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
      }

      64% {
        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
      }

      66% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg);
      }

      68% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
      }

      70% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
      }

      72% {
        transform: translate(-0.5px, -1.5px) rotate(1.5deg);
      }

      74% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
      }

      76% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
      }

      78% {
        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
      }

      80% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
      }

      82% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
      }

      84% {
        transform: translate(-0.5px, 0.5px) rotate(1.5deg);
      }

      86% {
        transform: translate(2.5px, 1.5px) rotate(0.5deg);
      }

      88% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
      }

      90% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
      }

      92% {
        transform: translate(-1.5px, -1.5px) rotate(1.5deg);
      }

      94% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
      }

      96% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
      }

      98% {
        transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
      }

      0%, 100% {
        transform: translate(0, 0) rotate(0);
      }
    }
  </style>
</head>
<body>
<div class="kawaii">
  <div class="kawaii-tips"></div>
  <canvas id="live2d" width="560" height="500" class="live2d"></canvas>
</div>
<!--

                              ..
                            .' @`._
             ~       ...._.'  ,__.-;
          _..------/`           .-'    ~
         :     __./'       ,  .'-'--.._
      ~   `---(.-'''---.    \`._       `.   ~
        _.--'(  .______.'.-' `-.`        `.
       :      `-..____`-.                  ;
       `.             ````  稻花香里说丰年，  ;   ~
         `-.__           听取人生经验。  __.-'
              ````-----.......-----'''    ~
           ~                   ~
-->

<script src="./kawaii-tips.js"></script>
<script src="../lib/live2d.js"></script>
<script>
  $(function () {
    $(document).ready(function () {
      loadlive2d("live2d", "./pio.model.json", 0.5);
    })
  })
</script>
</body>
</html>
